<template>
  <div id="AccountMy">
    <div class="box">
      <div class="box_header">个人中心</div>
      <div class="box_body">
        <div>管理员ID:{{ MyId }}</div>
        <div>账号:{{ MyAccount }}</div>
        <div>用户组:{{ MyUserGroup }}</div>
        <div>创建时间:{{ MyCtime }}</div>
        <div class="avator">
          <p>头像:</p>
          <img :src="MyImage" alt="" class="oldImg" v-show="msg" @click="handleUpload">
          <el-upload class="avatar-uploader" action="http://127.0.0.1:5000/users/avatar_upload" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" v-show="!msg">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </div>
        <div>
          <el-button type="primary" @click="handleEditImg">修改头像</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { fetchLoginTwentyThree } from '../../api/index';
import { useRouter } from 'vue-router';
const router = useRouter();

//日期转换
function formatDateTime(dateTimeStr: any) {
  const date = new Date(dateTimeStr);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');

  //
  const offsetHours = 8; // UTC+8
  const localHours = date.getUTCHours() + offsetHours;
  return `${year}-${month}-${day} ${localHours}:${minutes}:${seconds}`;
}

//用户头像上传
const msg = ref(true);
const imageUrl = ref('')
const uploadImage = ref('')

function handleUpload() {
  msg.value = !msg.value;
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  //imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  //console.log(response.imgUrl);
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  uploadImage.value = response.imgUrl;
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

//获取基本的个人信息
const MyId = ref(sessionStorage.getItem('MyId'))//账号id
const MyAccount = ref(sessionStorage.getItem('MyAccount'))//账号名称
const MyImage = ref(sessionStorage.getItem('MyImage'))//账号头像
const MyUserGroup = ref(sessionStorage.getItem('MyUserGroup'))//账号用户组
const MyCtime = ref(formatDateTime(sessionStorage.getItem('MyCtime')))//账号创建时间

//console.log(MyUserGroup.value);//成功拿到权限
//console.log(MyId,MyAccount,MyImage,MyUserGroup);

//修改用户图片
const handleEditImg = async () => {
  //console.log(imageUrl.value);
  const res = await fetchLoginTwentyThree({ imgUrl: uploadImage.value })
  console.log(res);//成功获取
  //console.log(res.data.code);//成功获取
  if (res.data.code === 0) {
    alert('头像修改成功请重新登录');
    router.push('/')
  } else {
    alert('头像修改失败');
  }
}

</script>

<style scoped>
.box {
  width: 85vw;
  height: 40vw;
  margin-left: 1vw;
  box-shadow: 0.1vw 0.1vw 0.1vw 0.1vw #f0f0f0;
}

.box_header {
  padding: 1vw;
  border-bottom: 1px solid #f0f0f0;
}

.box_body {

  >div {
    height: 1.5vw;
    padding: 1vw;
    font-size: 1vw;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avator {
  height: 250px !important;
}

.avatar {
  width: 200px;
  height: 200px;
}

.oldImg {
  width: 200px;
  height: 200px;
}
</style>